import React, { Component } from 'react'
import Layout, { Header, Content } from 'antd/lib/layout/layout'
import logo from './images/logo.jpg'

import './index.css'
import { Card,Form,Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import {reqLogin} from '../../api'
import storage from '../../utils/storageUtils'
const {saveToken,saveUsername} = storage
//登录路由页面
export default class Login extends Component {
    onFinish = async (values)=>{
        //console.log(this.props)
        //console.log(values)
        const {username,password} = values;
        const {data:res} = await reqLogin(username,password);
        console.log(res);
        if(res.meta.status===200){
            message.success(res.meta.msg)
            //保存必要信息
            saveUsername(res.data.username);
            saveToken(res.data.token)
            this.props.history.replace('/admin')
        }else{
            message.error(res.meta.msg)
        }
        //console.log(username,password)
        //this.props.history.push('/admin')
    }
    ValidPsw = (rule,value)=>{
        if(value.length<3){
            return Promise.reject('用户密码不少于3位')
        }else if(value.length>8){
            return Promise.reject('用户密码不多于8位')
        }
        return Promise.resolve();
    }

    render() {
        return (
            <Layout className='login-container'>
                <Header className='login-header'>
                    <img src={logo} alt='logo'  className='logo'/>
                    <h1 className='login-header-title'>React项目：后台管理系统</h1>
                </Header>
                <Content className='login-main'>
                    <Card title="用户登录" bordered={false} style={{ width: 400 }}>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={this.onFinish}
                        >
                            <Form.Item
                                name="username"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名!',
                                        validateTrigger:'onBlur'
                                    },
                                    {
                                        min: 4,
                                        message: '用户名不少于4位!',
                                        validateTrigger:'onBlur'
                                    },
                                    {
                                        max: 8,
                                        message: '用户名不多于8位!',
                                        validateTrigger:'onBlur'
                                    },
                                    {
                                        pattern:/^[a-zA-Z0-9_]+$/,
                                        message: '用户名必须由字母、数字、下划线组成!',
                                        validateTrigger:'onBlur'
                                    },
                                ]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                            </Form.Item>
                            
                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码!',
                                        validateTrigger:'onBlur'
                                    },
                                    {
                                        validator:this.ValidPsw,
                                        validateTrigger:'onBlur'
                                    }
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="密码"
                                />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </Card>
                </Content>
            </Layout>
        )
    }
}
